<template>
  <a-form ref="formRef" v-bind="attrs" class="small" :model="formState">
    <a-row :gutter="16">
      <a-col
        :span="item.span"
        :align="item.align"
        v-for="(item, index) in props.items"
        :key="`p_${index}`"
      >
        <a-row v-if="item?.children?.length" :gutter="16">
          <a-col
            :span="subItem.span"
            v-for="(subItem, sIndex) in item.children"
            :key="sIndex"
          >
            <a-form-item :label="subItem.label" :name="subItem.field">
              <component
                v-model:[modifyVar(subItem)]="formState[subItem.field]"
                v-if="!subItem.slots"
                :is="subItem.itemRender.name"
                :options="subItem.itemRender.options"
                v-bind="subItem.itemRender?.props"
              ></component>
              <slot v-else :name="subItem.slots.default"></slot>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item
          v-else-if="item?.itemRender?.name !== 'buttons'"
          :label="item.label"
          :name="item.field"
        >
          <component
            v-model:[modifyVar(item)]="formState[item.field]"
            v-if="!item.slots"
            :is="item.itemRender.name"
            :options="subItem.itemRender.options"
            v-bind="subItem.itemRender?.props"
          ></component>
          <slot v-else :name="item.slots.default"></slot>
        </a-form-item>
        <a-form-item v-else>
          <a-button
            class="mr10"
            size="small"
            :key="btnIndex"
            v-for="(btn, btnIndex) in item?.itemRender?.children"
            @click="clickEvent(btn)"
            v-bind="btn.props"
          >
            {{ btn.props.content }}
          </a-button>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>
<script setup>
import { ref, useAttrs } from 'vue'
import { post } from 'server/axios.js'
const props = defineProps({
  action: {
    type: String,
    default: ''
  },

  data: {
    type: Object,
    default: () => {}
  },
  items: {
    type: Array,
    default: () => []
  },
  params: {
    type: Object,
    default: () => {}
  }
})
const attrs = useAttrs()
const emits = defineEmits([])
const formRef = ref(null)
const formState = ref(props.data)
// 解析v-model的修饰符
const modifyVar = item => {
  const name = item.itemRender.name
  return [
    'a-checkbox',
    'a-checkbox-group',
    'a-radio-group',
    'a-radio',
    'a-switch'
  ].includes(name)
    ? 'checked'
    : 'value'
}
const onAction = post(`${process.env.VUE_APP_CONFIG}/${props.action}`, {
  ...formState.value,
  ...props.params
})
/**
 * 提交按钮
 */
const submitEvent = btn => {
  const { clickType } = btn.props
  formRef.value
    .validate()
    .then(async () => {
      if (props.action) {
        const result = await onAction()
        console.log(result)
      }
      emits(clickType)
    })
    .catch(err => {
      console.error(err)
    })
}
/**
 * 重置
 */
const resetEvent = btn => {
  const { clickType } = btn.props
  formRef.value.clearValidate()
  formState.value = {}
  emits(clickType)
}
/**
 * 按钮提交
 */
const clickEvent = async btn => {
  const { clickType } = btn.props
  if (clickType === 'submit') {
    submitEvent(btn)
  } else if (clickType === 'reset') {
    resetEvent(btn)
  }
}
</script>
<style lang="scss" scoped></style>
